import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./home"
// 引入api
import { reqGetnew,reqGroupon,reqSeckill,reqIndexGoods } from "../../request/api";
// 引入css样式
import "./home.css"
// 引入组件
import GetNew from "./components/GetNew"
import Groupon from "./components/Groupon"
import Seckill from "./components/Seckill.jsx";
import Indexgoods from "./components/Indexgoods.jsx";

export default function Home(props) {
    const [state, dispatch] = useReducer(reducer, initState);
    //相当于生命周期
    useEffect(() => {
        reqGetnew().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeGetNew(res.data.list))
            }
        })
        reqGroupon().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeGroupon(res.data.list))
            }
        })
        reqSeckill().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeSeckill(res.data.list))
            }
        })
        reqIndexGoods().then(res => {
            if (res.data.code === 200) {
                dispatch(actions.changeIndexGoods(res.data.list))
            }
        })
    }, []);
    return (
        <div className="home">
            <header>
                <div className="middle">
                    <input type="text" placeholder="搜索内容" />
                    <span>搜索</span>
                </div>
            </header>
            <GetNew getNew={state.getNew}></GetNew>
            <Groupon groupon={state.groupon}></Groupon>
            <Seckill seckill={state.seckill}></Seckill>
            <Indexgoods indexGoods={state.indexGoods}></Indexgoods>
        </div>
    )
}
